<template>
	<view v-for="(item,index) in newsList" :key="index">
		<view class="message-item" @click="gotoDetail(item)"  >
		<view class="message-img">
			<image class="img" :src="item.mainImg" mode="" lazy-load="false" binderror="" bindload="">
			</image>
		</view>
		<view class='message-content'>
			<view class='message-title'>
			  {{item.title}}
			</view>
			<view class='message-info'>
				{{item.content}}
			</view>
			<view class='message-end'>
				<view class='yueduliang' style="margin-right: 26rpx;">
				  <image class="" src="../../static/imgs/yuedulaing.png" >
				  </image>
				  {{item.browseNum}} 阅读量
				</view>
				<view class='yueduliang' style="margin-right: 26rpx;">	
				  <image class="" src="../../static/imgs/pinlun.png">
				  </image>
				  {{item.commentNum}} 评论
				</view>
				<view class='yueduliang'>
				  <image class="" src="../../static/imgs/dianzan.png">
				  </image>
				  {{item.likeNum}} 点赞
				</view>
			</view>
		</view>
	</view>
	</view>

</template> 
<script>
import {hostNews} from '../../API/index.js'
	export default {
		data() {
			return {
				PageInfo:{
					days:360,
					page:1,
					limit:25
				},
				newsList:[],
			};
		},
		methods:{
			gotoDetail(data){
				const data_json = JSON.stringify(data);
				uni.navigateTo({
					url:`/pages/message-detail/message-detail?data=${data_json}`
			})
		},
			async getmessage(){
			let {PageInfo} = this
				try {
					const {data,total,msg,code} = await hostNews(PageInfo)
					if(code === 200){
						this.newsList = data
					}
				} catch (error) {
					console.log('error', error);
				}
		}

	},
		onLoad() {
			this.getmessage()
		},
	}
</script>

<style lang="scss">
	page{
		background-color: #f2f2f2;
		height: 100%;
		padding-bottom:20rpx ;
	}
	.message-item{
		margin-top:10px 10px;
		padding-top:20rpx;
		display: flex;
		height: 250rpx;
		margin-bottom: 20rpx;
		.message-img{
			width: 250rpx;
			height: 250rpx;
			image{
				width: 250rpx;
				height: 250rpx;
			}
		}
		.message-content{

			padding-left: 14rpx;
			.message-title{
				font-size: 32rpx;
				font-weight: 700;
			}
			.message-info{
				margin-top: 16rpx;
				overflow: hidden;
				font-size: 24rpx;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
			.message-end{
				display: flex;
				font-size: 24rpx;
				margin-top: 50rpx;
				.yueduliang{
					vertical-align: middle;
					height: 50rpx;
					line-height: 50rpx;
					image{
						width: 35rpx;
						height: 35rpx;
						position: relative;
						top: 8rpx;
						margin-right: 6rpx;
					}
				}
			}
		}
	}
</style>
